<template>
  <el-card class="content">
    <el-table
      stripe
      :data="warningManageList"
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
      class="el-table-box"
    >
      <el-table-column prop="name" label="测点名称"> </el-table-column>
      <el-table-column prop="description" label="预警原因"> </el-table-column>
      <el-table-column prop="warnTime" label="预警时间">
        <template slot-scope="scope">
          <span v-if="scope.row.warnType == 0 || scope.row.warnType == 1">
          </span>
          <span v-else>{{ scope.row.warnTime }} </span>
        </template>
      </el-table-column>
      <el-table-column prop="warnType" label="预警类型">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.warnType == 0 || scope.row.warnType == 1"
            type="success"
            size="mini"
            >正常</el-button
          >
          <el-button
            v-if="scope.row.warnType == 2 && scope.row.warnLevel == 1"
            type="danger"
            size="mini"
            >一级预警</el-button
          >
          <el-button
            v-if="scope.row.warnType == 2 && scope.row.warnLevel == 2"
            type="warning"
            size="mini"
            >二级预警</el-button
          >
          <el-button
            v-if="scope.row.warnType == 2 && scope.row.warnLevel == 3"
            size="mini"
            style="background: #f0de1b; color: #fff; border: 0"
            >三级预警</el-button
          >
          <el-button v-if="scope.row.warnType == 3">相对预警</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="dealStatus" label="处理状态">
        <template slot-scope="scope">
          <!-- <span size="mini" v-if="scope.row.dealStatus == 0 &&scope.row.warnType == 1|| scope.row.warnType==0">未处理</span> -->
          <span
            size="mini"
            v-if="scope.row.warnType == 2 && scope.row.dealStatus == 1"
            >已处理</span
          >
          <span
            size="mini"
            v-if="scope.row.warnType == 2 && scope.row.dealStatus == 0"
            >未处理</span
          >
        </template>
      </el-table-column>
      <el-table-column prop="dealTime" label="处理时间">
        <template slot-scope="scope">
          <span v-if="scope.row.dealStatus == 1 && scope.row.warnType == 2">{{
            scope.row.dealTime
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="dealType" label="处理方式">
        <template slot-scope="scope">
          <span
            v-if="scope.row.warnType == 0 || scope.row.warnType == 1"
          ></span>
          <!-- <span v-if="scope.row.dealType == 0">恢复正常</span> -->
          <span v-if="scope.row.dealType == 1 && scope.row.warnType == 2"
            >一小时内不预警</span
          >
          <span v-if="scope.row.dealType == 2 && scope.row.warnType == 2"
            >十二小时内不预警</span
          >
          <span v-if="scope.row.dealType == 3 && scope.row.warnType == 2"
            >一天内不预警</span
          >
          <span v-if="scope.row.dealType == 4 && scope.row.warnType == 2"
            >三天内不预警</span
          >
          <span v-if="scope.row.dealType == 5 && scope.row.warnType == 2"
            >一周内不预警</span
          >
        </template>
      </el-table-column>
      <el-table-column prop="warnType" label="操作">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.warnType == 2"
            type="danger"
            size="mini"
            @click="show_process_dialog(scope.row)"
            >点击处理</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="end">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.page"
        :page-sizes="[10, 15]"
        :page-size="query.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-row>
    <!-- 操作弹窗 -->
    <el-dialog title="预警处理" :visible.sync="dialog_flag" width="30%">
      <el-form
        ref="disposeForm"
        :model="disposeForm"
        label-width="80px"
        :rules="rules"
      >
        <el-form-item label="处理方式" prop="dealType">
          <el-select
            v-model="disposeForm.dealType"
            placeholder="请选择预警处理方式"
          >
            <el-option
              v-for="item in dealTypeList"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="处理备注" prop="remark">
          <el-input type="textarea" v-model="disposeForm.remark"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handWear">确定</el-button>
          <el-button @click="closeHandWear">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-card>
</template>

<script>
import axios from "axios";
import { getDataWarnListByPage, getTailingPondList } from "../../../api/warning-management-api";
export default {
  name: "InternalDisplacement",
  data() {
    return {
      dialog_flag: false,
      disposeForm: {
        dealType: null,
        remark: "",
        monitorPondId: null,
      },
      dealTypeList: [
        { id: 0, name: "恢复正常" },
        { id: 1, name: "1小时内不预警" },
        { id: 2, name: "6小时内不预警" },
        { id: 3, name: "1天内不预警" },
        { id: 4, name: "3天内不预警" },
        { id: 5, name: "一周内不预警" },
      ],
      query: {
        page: 1,
        pagesize: 10,
      },
      total: null,
      warningManageList: [],
      rules: {
        dealType: [
          { required: true, message: "请选择处理方式", trigger: "change" },
        ],
        remark: [{ message: "请填写备注", trigger: "blur" }],
      },
    };
  },
  mounted() {
    this.getTailingList();
    this.getDataWarnListByPage();
  },
  methods: {
    // 获取尾矿库id
    async getTailingList() {
      const res = await getTailingPondList({
        unitId: sessionStorage.getItem("unitId"),
      });
      if (res.resultCode == "200") {
        this.tailingList = res.parameter;
        window.sessionStorage.setItem("tailingPondId", this.tailingList[0].id); //默认选中
      }
    },
    //分页获取
    async getDataWarnListByPage() {
      const res = await getDataWarnListByPage({
        monitorTypeId: 4,
        pageCount: this.query.page,
        pageSize: this.query.pagesize,
        tailingPondId: sessionStorage.getItem("tailingPondId"),
      });
      if (res.resultCode == "200") {
        this.warningManageList = res.parameter.list;
        this.total = res.parameter.total;
      } else {
         this.$message({
          message: "暂无数据",
          offset: 400,
          duration: 1000,
        });
        this.warningManageList = [];
      }
    },
    handleSizeChange(val) {
      this.query.pagesize = val;
      this.getDataWarnListByPage();
    },
    handleCurrentChange(val) {
      this.query.page = val;
      this.getDataWarnListByPage();
    },
    show_process_dialog(row) {
      this.dialog_flag = true;
      this.disposeForm.monitorPondId = row.id;
    },
    handWear() {
      this.$refs.disposeForm.validate((val) => {
        if (val) {
          console.log(this.disposeForm);
          // const formData = new FormData()
          // for (const [key, value] of Object.entries(this.disposeForm)) {
          //   formData.append(key, value)
          // }
          axios({
            method: "post",
            url: "/warningManage/handleWarning",
            data: JSON.stringify(this.disposeForm),
            contentType: "application/json",
          }).then((res) => {
            console.log(res);
            if (res.data.resultCode == "200") {
              this.dialog_flag = false;
              this.$message.success("处理成功");
              this.getDataWarnListByPage();
            } else {
              this.$message.error("处理失败");
            }
          });
          console.log(this.disposeForm);
        } else {
          this.$message.error("请填写表单项");
        }
      });
      this.$refs.disposeForm.resetFields();
    },
    closeHandWear() {
      this.$refs.disposeForm.resetFields();
      this.dialog_flag = false;
    },
  },
};
</script>

<style scoped>
.content {
  height: 87vh;
  overflow-y: auto;
}
.el-table-box {
  margin-bottom: 20px;
  display: block;
  height: 76vh;
  overflow-y: auto;
}
.el-table::before {
  z-index: inherit;
}
</style>
